<template>
  <div class="con">
    <el-row gutter="20" style="height: 100%;">
      <el-col :span="12">
        <div class="left">
          <el-button class="btn">阈值设置</el-button>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="设备名称"> </el-table-column>
            <el-table-column prop="name" label="设备编号"> </el-table-column>
            <el-table-column prop="address" label="阈值范围"> </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="right">
          <el-button class="btn">阈值设置</el-button>
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column prop="date" label="设备名称" width="120px">
            </el-table-column>
            <el-table-column prop="name" label="设备编号" width="150px">
            </el-table-column>
            <el-table-column prop="address" label="阈值范围" width="120px">
            </el-table-column>
            <el-table-column prop="res" label="模拟结果"> </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "PipThreshold",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
      ],
      tableData2: [
        {
          date: "2016-05-02",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          res: "上海市普陀区金沙江路 1518 弄",
          address: "-1",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid rgba(0, 231, 231, 0.3);
}
::v-deep .el-table--border::after,
::v-deep .el-table--group::after {
  background-color: rgba(0, 231, 231, 0.3);
}
::v-deep .el-button {
  border-color: rgba(0, 231, 231, 0.4);
}
.el-table::before {
  background-color: transparent;
}
/* 列表首行样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #00484d;
  text-align: center;
}
// 每个表格字体样式
::v-deep .el-table .cell {
  text-align: center;
  color: white;
}

.con {
  height: 100%;
  width: 100%;
  justify-content: space-between;
  background-color: #0c323a;
  .left {
    height: 100%;
    background-color: #002127;
    border-radius: 10px;
    .btn {
      margin-left: 30px;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    ::v-deep .el-table__body-wrapper {
      height: 711px;
      overflow: auto;
    }
  }
  .right {
    height: 100%;
    background-color: #002127;
    border-radius: 10px;
    .btn {
      margin-left: 30px;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    ::v-deep .el-table__body-wrapper {
      height: 711px;
      overflow: auto;
    }
  }
}
::v-deep .el-row{
  height: 100%;
}
::v-deep .el-col-12{
  height: 100%;
}
</style>    